<template>
	<view>
		<TabCenterVue :current="current" :list="listTab" @click="changeTab"></TabCenterVue>
		<view class="pad-10">
			<!-- 我的关注 -->
			<view>
				<view v-for="(item,index) in dataSource">
					<view class="doctor-item">
						<view>
							<image v-if="item.headImg" class="img-doctor" :src="hostApi+item.headImg"></image>
							<image v-else class="img-doctor" src="/static/images/hospital/defaultDoctor.png"></image>
						</view>
						<view class="doctor-right">
							<view class="between">
								<view class="flex-start baseline">
									<view class="doctor-name">{{item.name}}</view>
									<view class="doctor-job mar-0-5">{{item.jobTitle}}</view>
								</view>
								<view class="doctor-btn" v-if="item.likesType==1" @click="toPage(item)">问医生</view>
								<view class="doctor-btn" v-if="item.likesType==2" @click="toPage(item)">问护士</view>
							</view>
							<view>
								<view class="flex-start" v-if="item.specialty">
									<view>擅长:</view>
									<view class="over-1 flex-1 doctor-specialty">{{item.specialty}}</view>
								</view>
								<view class="between likes">
									<view v-if="item.likesNum">接诊量:{{item.likesNum}}</view>
									<!-- <view v-if="item.evaluateNum">响应时间:{{item.evaluateNum}}分钟</view> -->
									<view v-if="item.evaluateNum">好评数:{{item.evaluateNum}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	import {
		doctorLikesSelect
	} from '../../api/doctorLikes';
	import TabCenterVue from '../../components/Tabs/TabCenter.vue';
	export default {
		components: {
			TabCenterVue
		},
		data() {
			return {
				dataSource: [],
				current: 0,
				listTab: [{
						name: "医生",
						type: 1
					},
					{
						name: "护理",
						type: 2
					}
				],
				likeType: 1, // 1医生2护士
			}
		},
		computed: {
			...mapGetters([
				'userInfo', 'hostApi'
			])
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {

				doctorLikesSelect({
					patId: this.userInfo.patId,
					status: 1,
					type: this.likeType
				}).then(res => {
					console.log(res)
					this.dataSource = res;
				})
			},
			toPage(item) {
				// 跳转到医生页面即显示医生介绍
				uni.navigateTo({
					url: `/pages/Introduce/doctor?code=` + item.code
				})
			},
			changeTab(e) {
				this.current = e
				this.likeType = this.listTab[e].type
				this.init()
			}
		}
	}
</script>

<style scoped>
	.img-doctor {
		width: 100px;
		height: 100px;
	}

	.doctor-item {
		display: flex;
		justify-content: flex-start;
		padding: 10px;
		border-bottom: 1px solid rgb(237, 242, 250);
		margin: 10px 0;
		background-color: white;
		border-radius: 10px;
	}

	.doctor-right {
		flex: 1;
		padding: 0 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.doctor-name {
		font-size: 20px;
		font-weight: bold;

	}

	.doctor-job {
		color: gray;
	}

	.doctor-btn {
		background-color: rgb(62, 129, 247);
		color: white;
		padding: 5px 10px;
		border-radius: 10px;
	}

	.doctor-specialty {
		width: 200px;
	}

	.likes {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 12px;
		color: #999999;
		line-height: 25px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		/* margin-right: 10px; */
	}
</style>